<template>
	<view class="content">
		<page-head title="我的订单" :headtype="2"></page-head>
		<view :class="navtop>0?'tabs_warp_sticky':'tabs_warp'" :style="navtop>0?'top:'+tabSticStyle.top:''">
			<u-sticky>
				<u-tabs :list="tabsList" :lineWidth="0" :lineHeight="0" :scrollable="false"
					:activeStyle="{color:'#333333',fontWeight:'600'}" :inactiveStyle="{color: '#999999'}"
					:current="current" @change="changeOrderType"></u-tabs>
			</u-sticky>
		</view>
		<view class="list_body">
			<view v-for="(item,index) in orderList" :key="index" class="order_item">
				<order-list-item :item="item" @toDetail="toDetail" @toPay="toPay" @toCancel="toCancel" @toSign="toSign"
					@toEvaluate="toEvaluate" @toRefund="toRefund" @toRefundDetail="toRefundDetail"></order-list-item>
			</view>
			<dataempty v-if="orderList.length <= 0"></dataempty>
			<u-loadmore status="nomore" isDot dashed :height="40" line />
		</view>
	</view>
</template>

<script>
	import orderListItem from "@/components/orderList_item.vue"
	export default {
		components: {
			orderListItem
		},
		data() {
			return {
				tabSticStyle: {
					top: "0px"
				},
				tabsList: [{
					name: '全部',
					id: 0,
				}, {
					name: '待支付',
					id: 1,
				}, {
					name: '待发货',
					id: 2,
				}, {
					name: '待核销',
					id: 3,
				}, {
					name: '待收货',
					id: 4,
				}, {
					name: '已完成',
					id: 5,
				}],
				current: 0,
				navtop: 0,
				query: {
					page: 1,
					limit: 10,
					type: 0,
					order_type: 1
				},
				more: true,
				nodata: true,
				orderList: []
			}
		},
		onPageScroll(e) {
			this.navtop = e.scrollTop
			console.log(this.tabSticStyle.top);
		},
		onPullDownRefresh() {
			this.query.page = 1
			this.orderList = []
			this.nodata = true
			this.more = true
			this.getOrderList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(option) {
			if (option.orderstus) {
				this.tabSticStyle.top = uni.getStorageSync('ClientRect').top + uni.getStorageSync('ClientRect').height +
					10 +
					"px"
				this.current = Number(option.orderstus)
				this.query.type = this.tabsList[this.current].id
				this.query.page = 1
				this.orderList = []
				this.nodata = true
				this.more = true
				this.getOrderList()
			}
		},
		onReachBottom() {
			if (this.more) {
				this.query.page += 1
				this.getOrderList()
			}
		},
		methods: {
			toSign(item) {
				uni.showModal({
					title: "确定收到货物吗？",
					cancelText: "取消",
					cancelColor: "#999999",
					confirmText: "确定",
					confirmColor: "#9E190F",
					success: (res) => {
						if (res.confirm) {
							let data = {
								order_sn: item.order_sn
							}
							this.apifun.unirequest("/api/order/confirmReceipt", "post", data, (res => {
								if (res.code == 200) {
									this.apifun.toast('已收货')
									this.query.page = 1
									this.orderList = []
									this.nodata = true
									this.more = true
									this.getOrderList()
								} else {
									this.apifun.toast(res.msg)
								}
							}), true, true)
						}
					}
				})
			},
			toCancel(item) {
				uni.showModal({
					title: "确定取消订单吗？",
					cancelText: "取消",
					cancelColor: "#999999",
					confirmText: "确定",
					confirmColor: "#9E190F",
					success: (res) => {
						if (res.confirm) {
							let data = {
								id: item.id
							}
							this.apifun.unirequest("/api/order/cancelOrder", "post", data, (res => {
								if (res.code == 200) {
									this.apifun.toast('已取消')
									this.query.page = 1
									this.orderList = []
									this.nodata = true
									this.more = true
									this.getOrderList()
								} else {
									this.apifun.toast(res.msg)
								}
							}), true, true)
						}
					}
				})
			},
			toPay(item) {
				if (item.order_type == 1) {
					uni.navigateTo({
						url: "./store_payment?orderSn=" + item.order_sn
					})
				}
				if (item.order_type == 2) {
					uni.navigateTo({
						url: "./expressage_payment?orderSn=" + item.order_sn
					})

				}
				if (item.order_type == 3) {
					uni.navigateTo({
						url: "./city_payment?orderSn=" + item.order_sn
					})
				}
				if (item.order_type == 4) {
					uni.navigateTo({
						url: "./appointment?orderSn=" + item.order_sn
					})
				}
			},
			toRefundDetail(item) {
				uni.navigateTo({
					url: "./refundDetail?orderSn=" + item.order_sn
				})
			},
			toEvaluate(item) {
				uni.navigateTo({
					url: "./evaluate?orderSn=" + item.order_sn
				})
			},
			toRefund(item) {
				uni.navigateTo({
					url: "./refund?orderSn=" + item.order_sn
				})
			},
			toDetail(item) {
				if (item.order_status == 1) {
					this.toPay(item)
				} else if (item.order_status == 0) {
					uni.navigateTo({
						url: "./order_end?orderSn=" + item.order_sn
					})
				} else {
					if (item.order_status >= 5) {
						uni.navigateTo({
							url: "./order_end?orderSn=" + item.order_sn
						})
					} else {
						uni.navigateTo({
							url: "./order_detail?orderSn=" + item.order_sn
						})
					}
				}
			},
			changeOrderType(e) {
				if (e.index != this.current) {
					this.current = e.index
					this.query.type = this.tabsList[this.current].id
					this.query.page = 1
					this.orderList = []
					this.nodata = true
					this.more = true
					this.getOrderList()
				}
			},
			async getOrderList() {
				let data = this.query
				await this.apifun.unirequest('/api/order/getOrderList', 'post', data, (res => {
					if (res.code == 200) {
						if (this.query.page == 1) {
							if (res.data.data.length == 0) {
								this.nodata = true
							} else {
								this.nodata = false
							}
							this.orderList = res.data.data
						} else {
							if (res.data.data.length == 0) {
								this.more = false
							} else {
								this.orderList = this.orderList.concat(res.data.data)
							}
						}
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs_warp_sticky {
		width: 100%;
		position: sticky;
		background-color: #ffffff;
		z-index: 1;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
	}

	.tabs_warp {
		width: 100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
	}

	.list_body {
		margin-top: 20rpx;
		padding: 0rpx 30rpx 24rpx 30rpx;
	}

	.order_item {
		margin-bottom: 20rpx;
	}

	page {
		width: 100%;
		background-color: #F4F4F4;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}
</style>